<template>
  <div class="container">
    <div class="title">
      <h1>组件间通信例子</h1>
    </div>
    <div class="nav">
      <ul>
        <li v-for="{ name, info } of routerItems" :key="name">
          <router-link :to="{ name }" active-class="active">{{
            info
          }}</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
import { routes } from "./router";

const routerItems = routes.map((e) => ({
  name: e.name,
  info: e.meta.title,
}));
</script>

<style scoped>
h1 {
  margin: 5px 10px;
}
.container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.title {
  grid-column: 1 / 6;
}
.nav {
  grid-column: 1 / 2;
  background-color: #eee;
}

.nav a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
  display: block;
  padding: 0.2em 1em;
  font-size: 1.3rem;
}
.nav ul {
  list-style-type: none;
  padding: 0.5em 0.2em;
}
.content {
  grid-column: 2 / 6;
  background-color: skyblue;
  padding: 1em;
}
.active {
  background-color: orange;
  border-radius: 10px;
}
</style>
